import type { Layer } from '@shared/schema'
import { Eraser } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { ScrollArea } from '@/components/ui/scroll-area'
import { Separator } from '@/components/ui/separator'

interface PropertiesInspectorProps {
  layer: Layer | undefined
  onLayerUpdate: (updates: Partial<Layer>) => void
  onRemoveBackground?: (layerId: string) => void
}

export function PropertiesInspector({ layer, onLayerUpdate, onRemoveBackground }: PropertiesInspectorProps) {
  if (!layer) {
    return (
      <div className="flex flex-col items-center justify-center h-full p-6 text-center">
        <p className="text-sm text-muted-foreground">选择一个图层查看属性</p>
      </div>
    )
  }

  return (
    <div className="flex flex-col h-full w-full">
      {/* Header */}
      <div className="p-4 border-b shrink-0">
        <h2 className="text-sm font-semibold">属性</h2>
      </div>

      {/* Properties */}
      <ScrollArea className="flex-1 h-0">
        <div className="p-4 space-y-4 w-full">
          {/* Basic Info */}
          <div className="space-y-3">
            <div className="w-full">
              <Label htmlFor="layer-name" className="text-xs text-muted-foreground">
                图层名称
              </Label>
              <Input
                id="layer-name"
                value={layer.name || ''}
                onChange={e => onLayerUpdate({ name: e.target.value })}
                className="h-8 mt-1 font-mono text-sm w-full"
                data-testid="input-layer-name"
              />
            </div>
          </div>

          <Separator />

          {/* Position & Size */}
          <div className="space-y-3">
            <h3 className="text-xs font-semibold">位置和尺寸</h3>

            <div className="grid grid-cols-2 gap-2">
              <div>
                <Label htmlFor="layer-x" className="text-xs text-muted-foreground">
                  X
                </Label>
                <Input
                  id="layer-x"
                  type="number"
                  value={Math.round(layer.x)}
                  onChange={e => onLayerUpdate({ x: Number(e.target.value) })}
                  className="h-8 mt-1 font-mono text-sm"
                  data-testid="input-layer-x"
                />
              </div>
              <div>
                <Label htmlFor="layer-y" className="text-xs text-muted-foreground">
                  Y
                </Label>
                <Input
                  id="layer-y"
                  type="number"
                  value={Math.round(layer.y)}
                  onChange={e => onLayerUpdate({ y: Number(e.target.value) })}
                  className="h-8 mt-1 font-mono text-sm"
                  data-testid="input-layer-y"
                />
              </div>
            </div>

            <div className="grid grid-cols-2 gap-2">
              <div>
                <Label htmlFor="layer-width" className="text-xs text-muted-foreground">
                  宽度
                </Label>
                <Input
                  id="layer-width"
                  type="number"
                  value={Math.round(layer.width)}
                  onChange={e => onLayerUpdate({ width: Number(e.target.value) })}
                  className="h-8 mt-1 font-mono text-sm"
                  data-testid="input-layer-width"
                />
              </div>
              <div>
                <Label htmlFor="layer-height" className="text-xs text-muted-foreground">
                  高度
                </Label>
                <Input
                  id="layer-height"
                  type="number"
                  value={Math.round(layer.height)}
                  onChange={e => onLayerUpdate({ height: Number(e.target.value) })}
                  className="h-8 mt-1 font-mono text-sm"
                  data-testid="input-layer-height"
                />
              </div>
            </div>
          </div>

          {/* Type-specific properties */}
          {layer.type === 'text' && (
            <>
              <Separator />
              <div className="space-y-3">
                <h3 className="text-xs font-semibold">文字属性</h3>

                <div>
                  <Label htmlFor="text-content" className="text-xs text-muted-foreground">
                    内容
                  </Label>
                  <Input
                    id="text-content"
                    value={layer.content}
                    onChange={e => onLayerUpdate({ content: e.target.value })}
                    className="h-8 mt-1 text-sm"
                    data-testid="input-text-content"
                  />
                </div>

                <div className="grid grid-cols-2 gap-2">
                  <div>
                    <Label htmlFor="font-size" className="text-xs text-muted-foreground">
                      字号
                    </Label>
                    <Input
                      id="font-size"
                      type="number"
                      value={layer.fontSize || (layer.style?.fontSize ? Number.parseInt(layer.style.fontSize) : 16)}
                      onChange={e => onLayerUpdate({
                        fontSize: Number(e.target.value),
                        style: { ...layer.style, fontSize: `${e.target.value}px` },
                      })}
                      className="h-8 mt-1 font-mono text-sm"
                      data-testid="input-font-size"
                    />
                  </div>
                  <div>
                    <Label htmlFor="text-color" className="text-xs text-muted-foreground">
                      颜色
                    </Label>
                    <div className="flex gap-2 mt-1">
                      <Input
                        id="text-color"
                        type="color"
                        value={layer.color || layer.style?.color || '#000000'}
                        onChange={e => onLayerUpdate({
                          color: e.target.value,
                          style: { ...layer.style, color: e.target.value },
                        })}
                        className="h-8 w-12 p-1"
                        data-testid="input-text-color"
                      />
                      <Input
                        value={layer.color || layer.style?.color || '#000000'}
                        onChange={e => onLayerUpdate({
                          color: e.target.value,
                          style: { ...layer.style, color: e.target.value },
                        })}
                        className="h-8 flex-1 font-mono text-sm"
                        data-testid="input-text-color-hex"
                      />
                    </div>
                  </div>
                </div>

                <div>
                  <Label htmlFor="font-family" className="text-xs text-muted-foreground">
                    字体
                  </Label>
                  <Input
                    id="font-family"
                    value={layer.fontFamily || layer.style?.fontFamily || 'sans-serif'}
                    onChange={e => onLayerUpdate({
                      fontFamily: e.target.value,
                      style: { ...layer.style, fontFamily: e.target.value },
                    })}
                    className="h-8 mt-1 text-sm"
                    data-testid="input-font-family"
                  />
                </div>
              </div>
            </>
          )}

          {layer.type === 'shape' && (
            <>
              <Separator />
              <div className="space-y-3">
                <h3 className="text-xs font-semibold">形状属性</h3>

                <div>
                  <Label htmlFor="shape-type" className="text-xs text-muted-foreground">
                    类型
                  </Label>
                  <Input
                    id="shape-type"
                    value={layer.shapeType || 'rectangle'}
                    disabled
                    className="h-8 mt-1 text-sm"
                    data-testid="input-shape-type"
                  />
                </div>

                <div>
                  <Label htmlFor="fill-color" className="text-xs text-muted-foreground">
                    填充色
                  </Label>
                  <div className="flex gap-2 mt-1">
                    <Input
                      id="fill-color"
                      type="color"
                      value={layer.fill || layer.style?.backgroundColor || '#CCCCCC'}
                      onChange={e => onLayerUpdate({
                        fill: e.target.value,
                        style: { ...layer.style, backgroundColor: e.target.value },
                      })}
                      className="h-8 w-12 p-1"
                      data-testid="input-fill-color"
                    />
                    <Input
                      value={layer.fill || layer.style?.backgroundColor || '#CCCCCC'}
                      onChange={e => onLayerUpdate({
                        fill: e.target.value,
                        style: { ...layer.style, backgroundColor: e.target.value },
                      })}
                      className="h-8 flex-1 font-mono text-sm"
                      data-testid="input-fill-color-hex"
                    />
                  </div>
                </div>

                <div>
                  <Label htmlFor="stroke-color" className="text-xs text-muted-foreground">
                    描边色
                  </Label>
                  <div className="flex gap-2 mt-1">
                    <Input
                      id="stroke-color"
                      type="color"
                      value={layer.stroke || layer.style?.borderColor || '#000000'}
                      onChange={e => onLayerUpdate({
                        stroke: e.target.value,
                        style: { ...layer.style, borderColor: e.target.value },
                      })}
                      className="h-8 w-12 p-1"
                      data-testid="input-stroke-color"
                    />
                    <Input
                      value={layer.stroke || layer.style?.borderColor || '#000000'}
                      onChange={e => onLayerUpdate({
                        stroke: e.target.value,
                        style: { ...layer.style, borderColor: e.target.value },
                      })}
                      className="h-8 flex-1 font-mono text-sm"
                      data-testid="input-stroke-color-hex"
                    />
                  </div>
                </div>

                <div>
                  <Label htmlFor="stroke-width" className="text-xs text-muted-foreground">
                    描边宽度
                  </Label>
                  <Input
                    id="stroke-width"
                    type="number"
                    value={layer.strokeWidth || (layer.style?.borderWidth ? Number.parseInt(layer.style.borderWidth) : 1)}
                    onChange={e => onLayerUpdate({
                      strokeWidth: Number(e.target.value),
                      style: { ...layer.style, borderWidth: `${e.target.value}px` },
                    })}
                    className="h-8 mt-1 font-mono text-sm"
                    data-testid="input-stroke-width"
                  />
                </div>
              </div>
            </>
          )}

          {layer.type === 'image' && (
            <>
              <Separator />
              <div className="space-y-3">
                <h3 className="text-xs font-semibold">图像属性</h3>

                <div>
                  <Label htmlFor="image-description" className="text-xs text-muted-foreground">
                    描述
                  </Label>
                  <Input
                    id="image-description"
                    value={layer.description || layer.content || ''}
                    onChange={e => onLayerUpdate({
                      description: e.target.value,
                      content: e.target.value,
                    })}
                    className="h-8 mt-1 text-sm"
                    data-testid="input-image-description"
                  />
                </div>

                <div>
                  <Label htmlFor="opacity" className="text-xs text-muted-foreground">
                    不透明度
                  </Label>
                  <Input
                    id="opacity"
                    type="number"
                    min="0"
                    max="1"
                    step="0.1"
                    value={layer.opacity || (layer.style?.opacity ? Number.parseFloat(layer.style.opacity) : 1)}
                    onChange={e => onLayerUpdate({
                      opacity: Number(e.target.value),
                      style: { ...layer.style, opacity: e.target.value },
                    })}
                    className="h-8 mt-1 font-mono text-sm"
                    data-testid="input-opacity"
                  />
                </div>

                {onRemoveBackground && layer.imageData && (
                  <div>
                    <Label className="text-xs text-muted-foreground">
                      图片优化
                    </Label>
                    <Button
                      variant="outline"
                      size="sm"
                      className="w-full mt-1"
                      onClick={() => onRemoveBackground(layer.id)}
                      data-testid="button-remove-background"
                    >
                      <Eraser className="w-4 h-4 mr-2" />
                      去除背景
                    </Button>
                  </div>
                )}
              </div>
            </>
          )}
        </div>
      </ScrollArea>
    </div>
  )
}
